// animation to keep the resize controller in the right hand corner.
$(window).scroll(function() {
    $("#controller").animate({top:$(window).scrollTop() + "px"}, {queue: false, duration: 1});
});

// capture return key clicks to change iframe sizes
$("#width,#height").bind("keydown", function(e) {
    if (e.keyCode == 13) {
        resizeIFrameContent();
        updateInfo();
    }
});

$(document).ready(function() {
    $("#width").get(0).focus();
});


// focus on width input
$("#width").focus();

/**
 * Update the resize controller's select.
 */
function updateColor() {
    var color = "#" + $("#color").val();
    var $div = $(color + "IFrame").contents().find(color + "Div");
    $("#width").val($div.width());
    $("#height").val($div.height());
}

/**
 * Resizes the selected content to the specified size.
 */
function resizeIFrameContent() {
    var color = "#" + $("#color").val();
    var width = parseInt($("#width").val());
    var height = parseInt($("#height").val());
    $($(color + "IFrame").contents().find(color + "Div")[0]).css("height", height).css("width", width);
}

/**
 * Update the resize controller's info.
 */
function updateInfo() {
    var color = "#" + $("#color").val();
    var width = parseInt($("#width").val());
    var height = parseInt($("#height").val());
    $(color + "Info").text(width + " x " + height);
}